<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui/layer.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui/laydate.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/layui/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/zhiwang.css}"/>
</head>
<body>
<div th:include="unit/main-unit :: nav"></div>
<!--文档导入-->
<div class="index-box">
    <div id="upload-box" class="import-input">
        <div class="layui-upload">
            <input type="file" id="file">
            <button type="button" class="layui-btn" onclick="upload()" id="submit">开始上传</button>
            <button type="button" class="layui-btn" onclick="downloadTable()">下载数据</button>
        </div>
    </div>
    <!--输入/检查/添加-->
    <div class="import-input layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 844px;">
                <textarea name="" id="docContent" required lay-verify="required" placeholder="请输入文献内容..."
                          class="layui-textarea my-textarea"></textarea>
            </div>
            <div class="layui-input-inline" style="width: 70px;">
                <button type="button" class="layui-btn layui-btn-normal" onclick="appendTable(this)">添加
                </button>
            </div>
            <div class="layui-input-inline" style="width: 70px;">
                <button type="button" id="check-btn" class="layui-btn layui-btn-normal">检查</button>
            </div>
        </div>
    </div>
    <div class="table-doc">
        <table id="demo" lay-filter="test"></table>
    </div>
</div>
<div th:include="unit/main-unit :: footer"></div>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/layui.all.js}"></script>
<script type="text/javascript" th:src="@{/js/my.js}"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="check">检查</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:inline="javascript">
    $.getJSON('demo.json', function (result) {
        var demoData = result.data;
        loadTable(demoData);
    });

    var laydate = layui.laydate //日期
        , layer = layui.layer //弹层
        , table = layui.table //表格
        , element = layui.element; //元素操作

    //监听Tab切换
    element.on('tab(demo)', function (data) {
        layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
            tips: 1
        });
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'check') {
            var docContent = data.docContent;
            check(docContent);
        } else if (layEvent === 'del') {
            layer.confirm('真的删除行么', function (index) {
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
                //向服务端发送删除指令
            });
        }
    });
</script>
</body>
</html>